<!-- 首页 -->
<template>
	<view v-if="chat_flag == 1">
		<u-navbar title="发布红包" :background="background"></u-navbar>
		<view class="page-box">
			<view class="fabu-btn-box">
				<view class="clear-btn" @click="clearText">清空</view>
				<view :class="[content=='' ? 'btn-disabled' : 'fabu-btn']" @click="submit">发布</view>
			</view>
			<view class="text-box">
				<u-input v-model="content" height="200" :auto-height="false" type="textarea" maxlength="1000"></u-input>
			</view>
			<u-upload :max-size="5 * 1024 * 1024" max-count="9" :action="action" :header="header" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
			<u-form>
				<u-form-item label="红包主题" label-width="250">
					<u-input v-model="partyTitle"></u-input>
				</u-form-item>
				<u-form-item label="红包个数" label-width="250">
					<u-number-box :min="20" :step="10" :max="100" v-model="partyNum"  @change="valChange"></u-number-box>
				</u-form-item>
				<u-form-item label="单个金额" label-width="250">
					<u-number-box :min="20" :step="10" :max="200" v-model="partyCoin" @change="val2Change"></u-number-box>
				</u-form-item>
				<u-form-item label="红包总额" label-width="250">
					<u-number-box disabled v-model="partyAccount"></u-number-box>
				</u-form-item>
			</u-form>
		</view>
		<coin-popup></coin-popup>
		<user-auth></user-auth>
		<user-phone></user-phone>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		var token = 'Bearer ' + uni.getStorageSync('token');
		var action = this.website.baseUrl + '/oss/oss/upload';
		return {
			background: {
				backgroundColor: '#fff',
			},
			content: '',
			topicIds: '',
			// 演示地址，请勿直接使用
			action: action,
			header: {
				'Authorization': token
			},
			fileList: [],
			customStyle: {
				backgroundColor: '#606266', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			},
			hotTopicList: [],
			login: {
				appId: '',
				encryptedData: '',
				code: '',
				iv: ''
			},
			partyTitle: '',
			submitFlag: true,
			partyNum: 20,
			partyAccount: 400,
			partyCoin: 20,
			uid: '',
		};
	},
	mounted () {
		this.init();
	},
	// 分享小程序
	onShareAppMessage(res) {
		return {
			title: '送你一个对象，快来「处CP」吧！',
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		};
	},
	onShareTimeline() {
		return {
			title: '送你一个对象，快来「处CP」吧！',
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		}
	},
	methods: {
		init() {
			this.getUid();
			this.getHotTopicList();
		},
		onSuccess(e) {
			if(e.code == 200){
				var url = e.data;
				this.fileList.push(url);
			}else{
				this.$u.toast('图片上传失败');
			}
		},
		onRemove(index) {
			this.fileList.splice(index, 1); 
		},
		clearText() {
			this.content = '';
		},
		valChange(e) {
			this.partyAccount = e.value * this.partyCoin;
		},
		val2Change(e) {
			this.partyAccount = e.value * this.partyNum;
		},
		submit() {
			if(this.content == ''){
				return;
			}
			if(this.partyTitle == ''){
				this.$u.toast('请输入红包主题');
				return;
			}
			this.judgeLogin((res) => {
				if(res.user.phonenumber == null || res.user.phonenumber == ''){
					this.$u.vuex('vuex_phone', true);
					return;
				}
				this.addDynamic();
			});
		},
		getUid() {
			this.$u.get('/wq/dynamic/getUid').then(res => {
				this.uid = res.msg;
			})
		},
		addVipDynamic() {
			var image = this.fileList.join(",");
			this.$u.post('/wq/dynamic/addVip',{
				message: this.content,
				topicIds: this.topicIds,
				image: image
			}).then(res => {
				this.$refs.uToast.show({
					title: '剩余'+res.data+'次',
					type: 'success',
					duration: 1000,
					isTab: true,
					url: '/pages/index/world/index'
				});
			});
		},
		addDynamic() {
			var image = this.fileList.join(",");
			this.$u.post('/wq/dynamic/addPartyDynamic',{
				uid: this.uid,
				message: this.content,
				partyTitle: this.partyTitle,
				partyAccount: this.partyAccount,
				partyCoin: this.partyCoin,
				partyNum: this.partyNum,
				image: image
			}).then(res => {
				uni.reLaunch({
				  url: '/pages/index/world/index'
				})
			});
		},
		getHotTopicList() {
			this.$u.get('/wq/topic/getHotTopic').then(res => {
				this.hotTopicList = res.data;
			})
		},
		preSave(run) {
			this.$u.get('/wq/topic/getMoreTopic').then(res => {
				this.topicList = res.topicList;
				this.fansTopicList = res.fansTopicList;
				run(res);
			})
		},
	}
}; 
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.page-box {
		padding: 20px;
		padding-bottom: 140rpx;
	}
	.text-box {
		padding: 5px;
	}
	
	.btn-box {
		width: 50%;
		margin-bottom: 20px;
	}
	.tag-scroll-box {
		padding: 15px 5px;
	}
	.send-btn {
		width: 50%;
		background-color: #5082e5;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 20px;
		border-radius: 20px;
		font-size: 12px;
	}
	.send-btn-text {
		margin-left: 5px;
	}
	.send-box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 100%;
		bottom: 20px;
	}
	.fabu-btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.clear-btn {
		background-color: #f4f5f6;
		color: #606266;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 20px;
	}
	
	.fabu-btn {
		background-color: #5082e5;
		color: #fff;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 20px;
	}
	.btn-disabled {
		background-color: #c3aae9;
		color: #fff;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 20px;
	}
	
</style>
